<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		
		<style>
			table,
			tr,
			th,
			td {
				border: 1px solid #0094ff;
			}

			.gouwulist a {
				text-decoration: none;
				color: red;
				/* vertical-align: initial; */
				display: block;
				margin: 10px auto;
			}

			table {
				width: 800px;
				text-align: center;
				border-collapse: collapse;
				border-spacing: 0px;
			}

			table img {
				height: 30px;
				width: 30px;
			}
			.gouwulist{
				width: 1310px;
				margin: 0 auto;
			}
		</style>
		<link rel="stylesheet" href="./css/main.css">
	</head>
	<body>
		<header>
			<div class="hdTopbox">
				<a href="main.html"><img src="images/logo.jpg" class="logoImg"></a>            
				<input type="text" id="searchTxt" class="searchTxt fl">
				<button class="searchBtn fl">搜索</button>
				<img src="images/广告.jpg" class="guanggaoimg">
			</div>
			<div class="hdButtombox">
				<div class="allBox fl">
					<span>全部商品分类</span>
				</div>
				<div class="secBox1 fl">
					<a href="#" class="secn">我的亚马逊</a>
				</div>
	
				<div class="secBox fl">
					<a href="#" class="secn">海外购</a>
				</div>
	
				<div class="secBox fl">
					<a href="#" class="secn">Kindle电子书</a>
				</div>
	
				<div class="secBox fl">
					<a href="#" class="secn">镇店之宝</a>
				</div>
	
				<div class="secBox fl">
					<a href="#" class="secn">全球开店</a>
				</div>
	
				<div class="secBox fl">
					<a href="#" class="secn">客户服务</a>
				</div>
	
				<div class="gwcBox fr">
					<a href="cart.html"><span>购物车</span></a>
				</div>
	
				<div class="loginBox fr ">
					<a href="register.html"><span>登录</span></a>
				</div>
	
			</div>
		</header>
		<div class="gouwulist">
		<a href="./index.html">查看商品</a>
		<table>
			<thead>
				<tr>
					<th>编号</th>
					<th>图片</th>
					<th>名称</th>
					<th>价格</th>
					<th>数量</th>
					<th>金额</th>
					<th>删除</th>
				</tr>
			</thead>
			<tbody id="tab">
			</tbody>
			<tfoot>
				<tr style="text-align: right;">
					<td colspan="7">
						总金额: <span id="money">0.0</span>
					</td>
				</tr>
			</tfoot>
		</table>
	</div>
		<footer>
			<div class="ftTopbox">
				<div class="ftTopmsg fl">
					<span class="tit1">了解我们</span>
					<a href="#" class="ftAbig">人才招聘</a>
					<a href="#" class="ftAbig">关于亚马逊</a>
					<a href="#" class="ftAbig">新闻中心</a>
				</div>
		
				<div class="ftTopmsg fl">
					<span class="tit1">合作信息</span>
					<a href="#" class="ftAbig">我要开店</a>
					<a href="#" class="ftAbig">加入联盟</a>
					<a href="#" class="ftAbig">合作伙伴</a>
				</div>
		
				<div class="ftTopmsg fl">
					<span class="tit1">帮助中心和购物指南</span>
					<a href="#" class="ftAbig">付款与退款</a>
					<a href="#" class="ftAbig">汇款单招领</a>
					<a href="#" class="ftAbig">发货与配送</a>
					<a href="#" class="ftAbig">退货与换货</a>
					<a href="#" class="ftAbig">帮助中心</a>
				</div>
			</div>
			
			
	
			<div class="ftlogobox">
				<img src="./images/navAmazonLogoFooter._CB485935925_.jpg" alt="">
			</div>
			<span class="ance">美国/地区|加拿大|巴西|墨西哥|英国/地区|法国/地区|意大利|西班牙|德国/地区|日本|印度|亚马逊家族网站:Shopbop</span>
			<span class="ance">使用条件 隐私声明 版权所有 © 1996-2021，亚马逊公司或其关联公司</span>
			<span class="ance">互联网药品信息服务资格证书 (京)-非经营性-2012-0005</span>
			<span class="ance">京公网安备11010502030232号 增值电信业务经营许可证：合字 B2-20090004营业执照：91110000717883277U</span>
			<span class="ance">京ICP备11014788号出版物经营许可证</span>
		</footer>
		<script type="text/javascript">
			var oTab = document.querySelector("#tab");
			//获取本地数据
			var cartList = JSON.parse(localStorage.getItem("cart") || "[]"); //数组
			var strHtml = ``;
			cartList.forEach(function(item) {
				strHtml += `
					<tr>
						<td>${item.id}</td>
						<td><img src='${item.src}'></td>
						<td>${item.name}</td>
						<td>${item.price}</td>
						<td>
							<button class='sub'>-</button>
							<input style='width:20px;text-align:center' value='${item.number}'>
							<button class='sup'>+</button>
						</td>
						<td>${item.price*item.number}</td>
						<td><a class='del' data-id=${item.id} >删除</a></td>
					</tr>
				`
			})
			oTab.innerHTML = strHtml;
			computerMoney();

			oTab.addEventListener("click", function(evt) {
				var e = evt || window.event;
				var ele = e.target || e.srcElement;
				//减法
				if (ele.nodeName == 'BUTTON' && ele.className == 'sub') {
					var oInput = ele.nextElementSibling || next.nextSibling;
					var num = oInput.value;
					if (num <= 1) {
						return;
					}
					oInput.value = --num;
				}
				//加法
				if (ele.nodeName == 'BUTTON' && ele.className == 'sup') {
					var oInput = ele.previousElementSibling || next.previousSibling;
					var num = oInput.value;
					oInput.value = ++num;
				}
				var price = ele.parentNode.parentNode.children[3].innerText;
				num = ele.parentNode.parentNode.children[4].children[1].value;
				ele.parentNode.parentNode.children[5].innerText = num * price;
				//修改本地数量
				var id = ele.parentNode.parentNode.children[0].innerText;
				//获取本地数据
				var carList = JSON.parse(localStorage.getItem("cart") || '[]');
				for (var i = 0; i < carList.length; i++) {
					if (carList[i].id == id) {
						carList[i].number = num;
						break;
					}
				}
				//覆盖原来的本地数据
				localStorage.setItem('cart', JSON.stringify(carList));
				computerMoney();

				//加法
				// if (ele.nodeName == 'BUTTON' && ele.className == 'sup') {
				// 	var oInput = ele.previousElementSibling || next.previousSibling;
				// 	var num = oInput.value;
				// 	oInput.value = ++num;
				// 	var price = ele.parentNode.parentNode.children[3].innerText;
				// 	ele.parentNode.parentNode.children[5].innerText = num * price;
				// 	//修改本地数量
				// 	var id = ele.parentNode.parentNode.children[0].innerText;
				// 	//修改本地数量
				// 	var carList = JSON.parse(localStorage.getItem("cart") || '[]');
				// 	for (var i = 0; i < carList.length; i++) {
				// 		if (carList[i].id == id) {
				// 			carList[i].number = num;
				// 			break;
				// 		}
				// 	}
				// 	//覆盖原来的本地数据
				// 	localStorage.setItem('cart', JSON.stringify(carList));
				// 	computerMoney();
				// }
			})

			//删除
			oTab.addEventListener("click", function(evt) {
				var e = evt || window.event;
				var ele = e.target || e.srcElement;
				if (!(ele.nodeName == 'A' && ele.className == 'del')) {
					return;
				}
				if (!confirm("你确定要删除吗?")) {
					return;
				}
				var cartList = JSON.parse(localStorage.getItem("cart") || '[]');
				//1.先删本地数据
				var id = ele.parentNode.parentNode.children[0].innerText;
				for (var i = 0; i < cartList.length; i++) {
					if (cartList[i].id == id) {
						cartList.splice(i, 1);
						break;
					}
				}
				localStorage.setItem("cart", JSON.stringify(cartList));
				//2.再视觉效果
				ele.parentNode.parentNode.remove();
				computerMoney();
			})

			//计算总金额
			function computerMoney() {
				var money = 0;
				for (var i = 0; i < oTab.children.length; i++) {
					money += Number(oTab.children[i].children[5].innerText);
				}
				document.querySelector("#money").innerHTML = money;
			}
		</script>
	</body>
</html>
